<template>
<view class="header bg-gradual-blue">
	<sent-navbar>我的</sent-navbar>
	<view class="user-head flex">
		<view class="user-head-img">
			<image :src="userinfo.social?.avatar" class="avatar" mode="aspectFill"></image>
		</view>
		<view class="user-info flex flex-direction">
			<text class="t text-xl text-white">{{ userinfo.nickname }}</text>
			<text class="t text-df text-white">ID：{{ userinfo.uid }}</text>
		</view>
	</view>
</view>
<view class="user-count-box bg-white">
	<view class="grid col-3">
		<view class="item flex flex-direction justify-center" v-for="(item,index) in countItem" :key="index">
			<text><component class="icon" :is="item.icon" fill="#005332"/></text>
			<text class="t">{{ item.label }}</text>
		</view>
	</view>
</view>
<sent-card title="实用功能" :titleBorder="false" style="margin: 20rpx;">
	dd
</sent-card>
<sent-card title="我的服务" radius arrow style="margin: 20rpx;">
	dd
</sent-card>

<view style="margin: 30rpx; text-align: center;">
	<view class="cu-btn round lg bg-red" style="width: 80%;" @click="logout">退出登录</view>
</view>

<sent-tabbar :current="tabbar.current" :tabBar="tabbar.list" @tabSelect="tabSelect"></sent-tabbar>
</template>

<script>
export default {
	data() {
		return {
			tabbar: {
				current: 1,
				list: this.$config.tabbarList
			},
			countItem: [
				{label: '钱包', icon: "stIconWallet"},
				{label: '优惠券', icon: "stIconCoupon"},
				{label: '积分', icon: "stIconPoint"}
			],
			userinfo: this.$store.state.user.userInfo
		}
	},
	onLoad(e) {
		if(!this.$store.state.user.isLogin){
			this.$u.route('/pages/ucenter/login/index')
		}else{
			this.getUserInfo()
		}
	},
	methods: {
		tabSelect(e){
			this.$u.route(this.tabbar.list[e].link)
		},
		async getUserInfo(){
			let res = await this.$api.member.lists.user.get({type: 'wechat'})
			if(res.code == 1){
				this.userinfo = res.data
				this.$store.commit('setUserInfo', res.data)
			}
		},
		async logout(){
			let res = await this.$api.member.logout.post()
			if(res.code == 1){
				this.$store.commit('setUserLogout')
				this.$u.route('/pages/ucenter/login/index')
			}else{
				this.$u.toast('退出失败!')
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.header{
	border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx; padding-bottom: 80rpx;
	.user-head{
		padding: 20px;
		.user-head-img{
			padding: 10rpx;
			.avatar{width: 120rpx; height: 120rpx; border-radius: 10rpx; background: #efefee;}
		}
		.user-info{
			padding: 10rpx 20rpx; flex: 1;
			.t{padding: 0 0 2rpx 0;}
		}
	}
}
.user-count-box{
	padding: 20rpx; margin: auto 20rpx; margin-top: -80rpx; border-radius: 10rpx;
	.item{
		text-align: center; padding: 10rpx;
		.icon{height: 60rpx;}
		.t{font-size: 26rpx;}
	}
}
</style>
